<template>
  <div class="videos-wrapper">
    <!-- 第一个视频 -->
    <div class="video-container">
      <video 
        class="custom-video"
        controls 
      >
        <source src="/videos/shipin1.mp4" type="video/mp4">
      </video>
    </div>

    <!-- 第二个视频 -->
    <div class="video-container">
      <video 
        class="custom-video"
        controls 
      >
        <source src="/videos/shipin2.mp4" type="video/mp4">
      </video>
    </div>

    <!-- 第三个视频 -->
    <div class="video-container">
      <video 
        class="custom-video"
        controls 
      >
        <source src="/videos/shipin3.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</template>

<style scoped>
.videos-wrapper {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto; 
}

.video-container {
  display: flex;
  justify-content: center;
  margin: 1.5rem auto;
  width: 100%;
}

.custom-video {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.12);
  border: 3px solid #f5f5f5;
  transition: all 0.25s ease;
}

/* 鼠标悬停效果 */
.custom-video:hover {
  transform: scale(1.005);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);
  border-color: #e8e8e8;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .videos-wrapper {
    padding: 1rem 0.5rem;
  }
  
  .video-container {
    margin: 1rem auto;
  }
  
  .custom-video {
    max-width: 100%;
    border-radius: 6px;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>